<template>
	<div class="mybg">
		<div class="" style="width: auto">
			<img src="../../assets/53780.jpg" style="width: 100%; height: 99.8vh" />
		</div>
		<div class="inContentThen">
			<div class="titleINit1">自学考试平台</div>
			<div class="mySing">
				<div class="inSingce">
					<div class="inMix">
						账 &nbsp; 号
						<div class="searchIn">
							<el-input class="" style="width: 280px" size="medium" placeholder="请输入内容"
								prefix-icon="el-icon-user" v-model="account.idcard">
							</el-input>
						</div>
					</div>
					<div class="inMix1">
						密 &nbsp; 码
						<div class="searchIn">
							<el-input size="medium" type="grfbfgn" style="width: 280px" placeholder="请输入内容"
								show-password prefix-icon="el-icon-lock" v-model="account.pwd">
							</el-input>
						</div>
					</div>
					<div class="inMix1">
						验证码
						<div class="searchIn">
							<div class="" style="display: flex; width: 280px">
								<el-input class="inyan" size="medium" placeholder="验证码" prefix-icon="el-icon-lock"
									v-model="inputY">
								</el-input>
								<div class="indYanz" @click="changeCode()">
									<identify style="margin-left: 16px; height: 40px" :identifyCode="identifyCode">
									</identify>
								</div>
							</div>
						</div>
					</div>
					<!-- <el-button type="primary" @keyup.enter="tuchSing">主要按钮</el-button> -->
					<div class="since" @click="tuchSing" @keyup.enter="enterSearch">登录</div>
				</div>
			</div>
			<div class="dengousI">
				<div class="contentS">
					<div class="dengous">
						<div class="leftINit">
							<i class="el-icon-warning"></i>
						</div>
						<div class="inERight">
							考试过程中，您的违规次数和切屏次数都将被记录，超过限制将被强制结束考试！
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from "@/service";

	import identify from "@/components/SIdentify.vue";

	export default {
		name: "inventoryRecord",
		// 注册验证码组件
		components: {
			identify,
		},
		data() {
			return {
				windowesH: 0,
				account: {
					idcard: "52242319990924931X",
					pwd: "123456"
				},
				inputY: '', //输入的验证码
				identifyCode: "", //刷新的验证码
				identifyCodes: "1234567890",
			};
		},
		mounted() {
			// 刷新页面就生成随机验证码
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
			this.getClientHeight();
		},
		methods: {
			enterSearch() {
				document.onkeydown = e => {
					if (e.keyCode === 13 && this.$route.path === '/examPerson') {
						//回车后执行搜索方法
						this.tuchSing()
					}
				}
			},
			tuchSing() {

				this.$store.dispatch("loginModule/examLoginAction", {
					...this.account,
					inputY: this.inputY,
					identifyCode: this.identifyCode
				});
				this.changeCode() 
			},
			// 点击验证码刷新验证码
			changeCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
				console.log("1");
			},
			// 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
			randomNum(min, max) {
				max = max + 1;
				return Math.floor(Math.random() * (max - min) + min);
			},
			// 随机生成验证码字符串
			makeCode(data, len) {
				for (let i = 0; i < len; i++) {
					this.identifyCode += data[this.randomNum(0, data.length - 1)];
				}
			},
			getClientHeight() {
				let clientHeight = 0;
				if (document.body.clientHeight && document.documentElement.clientHeight) {
					let clientHeight =
						document.body.clientHeight < document.documentElement.clientHeight ?
						document.body.clientHeight :
						document.documentElement.clientHeight;
				} else {
					let clientHeight =
						document.body.clientHeight > document.documentElement.clientHeight ?
						document.body.clientHeight :
						document.documentElement.clientHeight;
				}
				this.windowesH = clientHeight;
				console.log(this.windowesH);
			},
		},
		created() {
			this.enterSearch()
		}
	};
</script>

<style scoped="scoped">
	.inContentThen {
		position: relative;
		z-index: 99;
		margin-top: -96vh;
	}

	.el-input--medium .el-input__inner {
		height: 40px;
		border-radius: 5px;
	}

	.indYanz {}

	.inyan {
		width: 160px;
	}

	.self-button {
		width: 280px;
		border-radius: 8px;
	}

	.inERight {
		margin-left: 10px;
		line-height: 1.5;
		letter-spacing: 1pt;
	}

	.leftINit {
		font-size: 46px;
	}

	.dengousI {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}

	.contentS {
		color: white;
		background-color: #ffbe2f;
		border-radius: 20px;
		width: 460px;
		padding: 20px;
	}

	.dengous {
		display: flex;
		align-items: center;
	}

	.since {
		width: 160px;
		font-size: 20px;
		letter-spacing: 3pt;
		border-radius: 4px;
		text-align: center;
		background-color: #0087f7;
		color: #ffffff;
		margin-top: 20px;
		padding: 8px 0;
	}

	.since:active {
		background-color: #55c4f7;
	}

	.searchIn {
		margin-left: 20px;
	}

	.inMix1 {
		margin-top: 20px;
		display: flex;
		align-items: center;
		font-size: 20px;
	}

	.inMix {
		display: flex;
		align-items: center;
		font-size: 20px;
	}

	.inSingce {
		width: 400px;
		border-radius: 20px;
		background-color: #ffffff;
		padding: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.mySing {
		display: flex;
		margin-top: 60px;
		justify-content: center;
		width: 100%;
	}

	.titleINit1 {
		font-size: 30px;
		color: #ffffff;
		margin-top: 120px;
		letter-spacing: 2pt;
		text-align: center;
	}

	::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.mybg {
		width: auto;
	}
</style>
